<template>
  <div class="pagss column_c">


    <div class="ggtitle">公告列表</div>
    <div class="xxtx">系统内变更的消息提醒</div>


    <!-- <el-row :gutter="0">
      <el-col  :span="18" :offset="3">
        <div class="panel-group2">
          <div class="f_20 f_bold" style="margin-bottom: 20px;">公告列表</div>


          <el-table :data="NoticeList" style="width: 100%">

            <el-table-column prop="created_at" label=""></el-table-column>

            <el-table-column prop="title" label="">
              <template slot-scope="scope">
                <div class="cursor" @click="handleUpdate(scope.row)">{{ scope.row.title }}</div>
              </template>
            </el-table-column>

            <el-table-column label="" width="60">
              <template slot-scope="scope">
                <div class="row center">
                  <div style="color: #00A30F;" class=" cursor" @click="handleUpdate(scope.row)">查看</div>
                </div>
              </template>
            </el-table-column>
          </el-table>

          <div class="">
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.noPage" :limit.sync="queryParams.pageSize" @pagination="getList" />
          </div>
        </div>
      </el-col>
    </el-row> -->





    <el-dialog :visible.sync="open" width="65%" append-to-body style="margin-top: 6%;" center>
      <div class="column center">
        <div style="color: #448DFF;" class="f_20 f_bold">{{noticeInfo.title}}</div>
      </div>

      <div class="mt10" style="#ABABAB">发布于{{noticeInfo.created_at}}</div>

      <div class="f_18" style="#000000" v-html="noticeInfo.content"></div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
  import CountTo from 'vue-count-to';
  import Cookies from 'js-cookie';
  import Vue from 'vue';

  import Navvz from '@/components/Navvz';
  import Sidebartss from '@/components/Sidebartss';
  import * as Database from '@/api/system/database';
  import * as Auth from '@/utils/auth';
  import * as Games from '@/api/system/games';
  import * as Notice from "@/api/system/notice";

  export default {
    name: 'Index',
    components: {
      CountTo,
      Navvz,
      Sidebartss
    },
    data() {
      return {
        open: false,
        NoticeList: [], //通知公告列表
        user_id: '',
        game_name: '',
        id: '', //更新id
        mysqlList: [],
        fileList: [],
        noticeInfo: '',
        editFiles: [],


        logo: '',
        // 总条数
        total: 0,
        // 字典表格数据
        tableData: [],
        // 弹出层标题
        title: '',
        // 是否显示弹出层
        open_zsf: false,
        open: false,
        openNy: false,

        // 查询参数
        queryParams: {
          noPage: 1,
          pageSize: 10,
        },
        loading: false
      };
    },
    created() {

      this.getList();

      this.user_id = localStorage.getItem('user_id')
    },
    mounted() {},
    methods: {

      // 取消按钮
      cancel() {
        this.open = false;
      },
      handleUpdate(row) {

        this.loading = true;
        var per = {}
        per.type_pj = 1
        per.ulid = row.ulid
        Notice.detail(per).then(response => {
          this.open = true;
          this.noticeInfo = response.data.info
          this.loading = false;
        })
      },

      /**通知，公告 */
      getList() {
        console.log('呀或勤劳')
        this.loading = true;
        this.queryParams.type_pj = 1

        Notice.getList(this.queryParams).then(response => {
          this.NoticeList = response.data.list;
          this.total = response.data.pagination.totalCount;
          this.loading = false;
        });
      },

    }
  };
</script>

<style lang="scss" scoped>
  .pagss {
    // height: 100%;
    // background: indianred;
  }

  .panel-group2 {
    padding: 25px;
    margin-top: 80px;
    // margin-right: 100px;
    // margin-left: 100px;
    // margin-bottom: 100px;
    height: 900px;

    background: #ffffff;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
  }

  ::v-deep .el-dialog--center .el-dialog__body {
    min-height: 600px;
  }

  ::v-deep .el-table .el-table__header-wrapper th,
  .el-table .el-table__fixed-header-wrapper th {
    background-color: #ffffff;
  }

  ::v-deep .el-table th.el-table__cell.is-leaf,
  .el-table td.el-table__cell {
    border-bottom: 0px solid #dfe6ec;
  }

  .ggtitle {
    font-size: 29px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #000000;
    line-height: 41px;
    margin-top: 100px;
  }

  .xxtx {
    margin-top: 17px;
    font-size: 13px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #242424;
    line-height: 22px;
  }
</style>
